<template>
	<view class="body">
		<!-- <view class="search-box">
			<uni-search-bar @confirm="search" @input="input" @cancel="user_cancel" :radius="20" placeholder="请输入城市名"
				:maxlength="8"></uni-search-bar>
		</view> -->
		<u-navbar :background="navObj" :is-back="false">
			<mSearch
				ref="mSearch"
				class="mSearch-input-box"
				@clickLeft="back"
				:mode="2"
				:placeholder="defaultKeyword"
				@search="doSearch(false)"
				@confirm="doSearch(false)"
				@SwitchType="doSearchSwitch()"
				v-model="keyword"
				:isFocusVal="!isShowSeachGoods"
			></mSearch>
		</u-navbar>
		<view class="current-city">
			<u-icon name="map" size="30" color="#666"></u-icon>
			<!-- 市级 -->
			<text class="left-title left-10">当前定位城市 沈阳</text>
		</view>
		<view class="used-cities name-wrap">
			<view class="name-top">
				<text>常用城市</text>
				<u-icon class="iconfont icon-shanchu font20" style="font-size: 20px;" color="#666"></u-icon>
			</view>

			<view class="list-wrap name-list">
				<view class="cities-name" v-for="(item, index) in usedList">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="hot-cities name-wrap">
			<view class="name-top">热门城市</view>
			<view class="hot-list name-list">
				<view class="hot-name cities-name" v-for="(item, index) in hotList">
					{{item.name}}
				</view>
			</view>
		</view>
		<template v-if="searchCitys.length===0">
			<block v-for="(item,index) in cityArray" :key="index">
				<view>
					<view class="categoryTitle" :class="alphabet[index]">
						{{ alphabet[index] }}
					</view>


					<block v-for="i in item" :key="i.value">
						<view class="cityStyle" hover-class="cityStyle-hover" @tap="click_city(i)">
							{{ i.label }}
						</view>
					</block>

				</view>
				<view class="right-title">
					<block v-for="(item,index) in alphabet" :key="item">
						<view @tap="click_rightTitle(index)">
							{{ item }}
						</view>
					</block>
				</view>
			</block>
		</template>
		<template v-else>
			<view class="search-city">
				<block v-for="item in searchCitys" :key="item.label">
					<view class="cityStyle" hover-class="cityStyle-hover" @tap="click_city(item)">
						{{ item.label }}
					</view>
				</block>
			</view>
		</template>
	</view>
</template>

<script>
	// 搜索框组件
	// import uniSearchBar from "../uni-search-bar/uni-search-bar.vue"
	import mSearch from '@/components/m-search-revision/m-search-revision.vue';
	// 城市数据
	import seriationCitys from "./seriation-citys.js";
	import * as API_Locate from '@/api/locate.js'
	export default {
		components: {
			// uniSearchBar,
			mSearch
		},
		data() {
			return {
				navObj: {
					background: '#fff'
				},
				defaultKeyword: '输入城市名搜索',
				keyword: '',
				isShowSeachGoods: false,
				isSWitch: false,
				params: {
					pageNumber: 1,
					pageSize: 10,
					// sort: 'grade_asc',
				
					keyword: ''
				},
				sortParams: {
					pageNumber: 1,
					pageSize: 10,
				
					// price: "", //价格,示例值(10_30)
					// prop: "", //属性:参数名_参数值@参数名_参数值,示例值(屏幕类型_LED@屏幕尺寸_15英寸)
					// brandId:"", //品牌,可以多选 品牌Id@品牌Id@品牌Id
					categoryId: ''
				},
				// 城市所有数据
				cityArray: [],
				alphabet: 'ABCDEFGHJKLMNPQRSTWXYZ',
				alphabetTopMargin: [0], //各项到顶部的距离存储,第一个默认是0
				searchCitys: [], //搜索出来的城市名称
				hotList: [{
						"name": "鞍山市",
						"value": "2103"
					},
					{
						"name": "安庆市",
						"value": "3408"
					},
					{
						"name": "安阳市",
						"value": "4105"
					}, {
						"name": "北京市",
						"value": "1101"
					},
					{
						"name": "保定市",
						"value": "1306"
					},
					{
						"name": "包头市",
						"value": "1502"
					},
				],
				usedList: [{
						"name": "本溪市",
						"value": "2105"
					},
					{
						"name": "白山市",
						"value": "2206"
					},
				]
			}
		},
		onLoad() {
			this.cityArray = seriationCitys;
			var heightAll = 50;
			for (var i = 0; i < this.cityArray.length - 1; i++) {
				var height = 20;
				for (var j = 0; j < this.cityArray[i].length; j++) {
					height += (40 + 1);
				}
				heightAll += (height - 1)
				this.alphabetTopMargin.push(heightAll)
			}
		},
		mounted() {
		 this.getCityList()	
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getCityList() {
				API_Locate.getCities(this.params.pageNumber, this.params.pageSize).then(res => {
					console.log("city-list=", res, res.data.result);
					let arr = []
					if(res.statusCode == 200) {

					}
					
				})
			},
			// ============================================
			doSearchSwitch() {
				this.isSWitch = !this.isSWitch;
				this.isShowSeachGoods = true;
				this.params.pageNumber = 1;
				this.params.pageSize = 10;
				// this.loadData('refresh', 1);
			},
			/**
			 * 执行搜索
			 */
			doSearch(keyword) {
				//  用户自行搜索/热门搜索/搜索历史
				keyword = keyword === false ? this.keyword : keyword;
			
				if (!keyword) {
					/**
					 * 进行空搜索
					 * 第一次搜索如果没有关键词会将热门搜索中第一个热词进行判定
					 * 如果没有热词则会展示一个空词搜索
					 */
					keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || '';
				}
				this.defaultKeyword == '请输入搜索商品' ? (keyword = '') : '';
				
			
				keyword ? (this.keyword = keyword) : '';
				// this.saveKeyword(keyword); //保存为历史
				this.isShowSeachGoods = true;
				this.$refs.mSearch.isShowSeachGoods = true;
				this.$refs.mSearch.inputVal = keyword;
				this.params.keyword = this.keyword;
				this.params.pageNumber = 1;
				// this.$set(this.sortParams, 'keyword', keyword);
				// this.loadData('refresh', 1);
			},
			//加载商品 ，带下拉刷新和上滑加载
			// async loadData(type, loading) {
			// 	this.loadingType = 'loading';
			// 	if (type == 'refresh') {
			// 		this.goodsList = [];
			// 	}
			// 	//没有更多直接返回 #TODO
			// 	let goodsList = await getGoodsList(this.params);
			// 	if (goodsList.data.result.records.length < 10) {
			// 		this.loadingType = 'noMore';
			// 		this.empty = true;
			// 	} else {
			// 		this.empty = false;
			// 	}
			// 	this.goodsList.push(...goodsList.data.result.records);
				
			// 	this.initSortGoods();
			// 	 if (this.$store.state.isShowToast){ uni.hideLoading() };
			// },
			// ================================================
			// 点击右边标题字母
			click_rightTitle(index) {
				uni.showToast({
					title: this.alphabet[index],
					duration: 1000,
					icon: 'none'
				})
				// // 设置滚动距离
				uni.pageScrollTo({
					scrollTop: this.alphabetTopMargin[index],
					duration: 300
				});
			},
			// 点击城市
			click_city(city) {
				uni.setStorage({
					key: 'weddingCity',
					data: JSON.stringify(city),
					success: function() {
						uni.switchTab({
							url: '../index/index'
						})
					}
				});

			},
			// 搜索事件
			search(e) {
				console.log(e)
			},
			// 输入事件
			input(e) {
				if (e.value === '') {
					this.user_cancel();
					return
				};
				// 循环赋值的JSON字符串变量
				var str = '';
				// 存储匹配的城市数组
				var inputCity = [];
				this.cityArray.map(arr => {
					arr.filter(item => {
						str = JSON.stringify(item);
						if (str.includes(e.value) && inputCity.length < 10 && !inputCity.includes(item)) {
							inputCity.push(item)
						}
					})
				});
				this.searchCitys = inputCity;
			},

			user_cancel() {
				this.searchCitys = [];
			}
		}
	}
</script>

<style scoped lang="less">
	.body {
		.search-box {
			height: 50px;
			width: 750rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		.current-city {
			color: black;
			padding: 20rpx;
			background-color: #fff;

			.left-10 {
				margin-left: 10rpx;
			}
		}

		.name-wrap {
			background-color: #FFFFFF;
			padding: 20rpx;
		}

		.name-top {
			margin-bottom: 15rpx;
			color: #999;
			
			display: flex;
			justify-content: space-between;
			
			
		}

		.name-list {
			display: flex;
			flex-wrap: wrap;

			.cities-name {
				background: #f5f5f5;
				padding: 10rpx;
				margin-right: 20rpx;
				margin-bottom: 15rpx;
			}
		}

		.categoryTitle {
			height: 20px;
			background: rgba(243, 243, 243, 1);
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			line-height: 20px;
			text-indent: 22rpx;
		}

		.cityStyle {
			height: 40px;
			border-top: 1px solid #ECECEC;
			line-height: 40px;
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-left: 22rpx;
		}

		.categoryTitle+.cityStyle {
			border-top: none;
		}

		.cityStyle-hover {
			background: #ECECEC;
		}

		.right-title {
			width: 62rpx;
			position: fixed;
			top: 300rpx;
			right: 0;
			padding: 50rpx 0;
			background: #FFFFFF;
			text-align: center;

			font-size: 20rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
</style>